<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
	
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Filterable DataTable</title>
		
		<style type="text/css">
			/* custom css*/
			body {font-family:arial}
			/* CSS FOR DataTable */
			div.yui_datatable {margin:1em;}
			div.yui_datatable table {border-collapse:collapse;}
			div.yui_datatable th, div.yui_datatable td {border:1px solid #F1EFE2;padding:.25em; text-align:center; }
			div.yui_datatable th {border-bottom:2px solid #D6D2C2; cursor:default;  font-family:arial;   font-size:8pt;  font-size-adjust:none; line-height:normal; background-color:#EBEADB;}
			div.yui_datatable th img {border-style:none}
			div.yui_datatable th a   {text-decoration:none; color:black; font-weight:normal}
			div.yui_datatable th a:hover {text-decoration:underline; }  
			div.yui_datatable em {font-style:italic;}
			div.yui_datatable strong {font-weight:bold;}
			div.yui_datatable .big {font-size:136%;}
			div.yui_datatable .small {font-size:77%}
			div.yui_datatable .yui-dt-sortedbyasc .yui-dt-headtext {background-image: url('assets/sort_asc.gif'); background-repeat:no-repeat; background-position:right;}/*arrow up*/ 
			div.yui_datatable .yui-dt-sortedbydesc .yui-dt-headtext {background-image: url('assets/sort_desc.gif'); background-repeat:no-repeat; background-position:right;}/*arrow down*/
			div.yui_datatable th .yui-dt-headtext {margin-right:5px;padding-right:15px;} /*room for arrow*/		
		
			/*CSS For Auto Complete*/
			.ac {position:relative;padding:1em;}
			.acF {position:relative;margin:1em;width:15em;}/* set width of widget here*/
			.acInput {position:absolute;width:100%;height:1.4em;}
			.acResult {position:absolute;top:1.7em;width:100%;}
			.acResult .yui-ac-content {position:absolute;width:100%;height:11em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
			.acResult .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
			.acResult ul {padding:5px 0;width:100%;}
			.acResult li {padding:0 5px;cursor:default;white-space:nowrap; font-size:small}
			.acResult li.yui-ac-highlight {background:#ff0;}
		</style>	
		<link type="text/css" rel="stylesheet" href="test-rowfilterdatatable_files/datatable.css">
		<link rel="stylesheet" type="text/css" href="test-rowfilterdatatable_files/reset.htm">
		<link rel="stylesheet" type="text/css" href="test-rowfilterdatatable_files/fonts.htm">
		<link rel="stylesheet" type="text/css" href="test-rowfilterdatatable_files/menu.htm">
		</head><body>

		<div class="yui_datatable" id="elDataTable"></div>
		
		<div class="ac">
        <form >
             <p style="font-weight:bold">Find an order by:
             <select id="fs" onchange="changeFilter()">
                <option value="breed">Breed</option>
                <option value="name" selected="true">Name</option>
            </select>
             </p>
            <div class="acF">
                <input class="acInput" id="acInput1" />
                <div class="acResult" id="acResult1"></div>
            </div>
            <br/><br/>
           </form>
        </div>			
<!-- Dependencies for DataTable -->
<!-- Required CSS -->

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/datatable/assets/datatable.css">

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<!-- OPTIONAL: Drag Drop (enables resizeable columns) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/dragdrop/dragdrop-min.js"></script>

<!-- OPTIONAL: External JSON parser from http://www.json.org/ (enables JSON validation) -->
<!--<script type="text/javascript" src="http://www.json.org/json.js"></script>-->

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js"></script>

<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/datasource/datasource-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/datatable/datatable-beta-min.js"></script>
<!--<script type="text/javascript" src="lib/YahooUI/datatable/datatable-beta-debug.js"></script>-->

<!-- Dependencies for Context Menu -->
<!--CSS-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/fonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/menu/assets/menu.css">

<!-- Dependencies --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container_core-min.js"></script>

<!-- Source File -->

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/menu/menu-min.js"></script><!-- End dependencies for Context Menu -->
<!-- End Dependencies for Context Menu -->

<!-- Dependencies for Autocomplete -->
<!-- Source File -->
<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/autocomplete/autocomplete-min.js"></script>
<!-- End dependencies for Autocomplete -->
<!-- Row filter and new DataTable classes -->
<script type="text/javascript" src="../../../build/extras/dpu/RowFilterDataTable.js" ></script>
<script type="text/javascript" src="../../../build/extras/dpu/RowFilter.js" ></script>

<script type="text/javascript">

var oColumnHeaders = [
    {key:"name", text:"Dog's Name" },
    {key:"breed", text:"Dog's Breed"},
    {key:"age", text:"Dog's Age (in Weeks)", type:"number", hideable:true}
];
var oColumnSet = new YAHOO.widget.ColumnSet(oColumnHeaders);

YAHOO.example.puppies = [
   {name:"Ashley",breed:"German Shepherd",age:12},
   {name:"Dirty Harry",breed:"Norwich Terrier",age:5},
   {name:"Emma",breed:"Labrador Retriever",age:9},
   {name:"Oscar",breed:"Yorkshire Terrier",age:6},
   {name:"Riley",breed:"Golden Retriever",age:6},
   {name:"Shannon",breed:"Greyhound",age:12},
   {name:"Washington",breed:"English Bulldog",age:8},
   {name:"Zoe",breed:"Labrador Retriever",age:3}
];

var oDataSource = new YAHOO.util.DataSource(YAHOO.example.puppies);
oDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
oDataSource.responseSchema = {
    fields: ["name","breed","age"]
};

var oDataTable = new YAHOO.dpu.widget.DataTable("elDataTable", oColumnSet, oDataSource, {rowsPerPage: 2});
oDataTable.subscribe("dataReturnEvent",initFilter,oDataTable);

function initFilter(oResp,oDataTable){
    var data=oResp.response;
    var fnFilter= new YAHOO.dpu.util.StringFilter(data,"name")
    fnFilter.maxCacheEntries = 0;
    var oAutoComp = new YAHOO.dpu.widget.RowFilter('acInput1','acResult1', oDataTable,fnFilter);
    var ua = navigator.userAgent.toLowerCase();
    if(ua.indexOf('msie') != -1 && ua.indexOf('opera') < 0) {
        oAutoComp.useIFrame = true;    
    }
} 

function changeFilter() {
    var s = document.getElementById("fs");
    var column= s.options[s.selectedIndex].value;
    fnFilter.schemaItem=column
    
}

fnFilter= new YAHOO.dpu.util.StringFilter(YAHOO.example.puppies,"name")
fnFilter.maxCacheEntries = 0;
oAutoComp = new YAHOO.dpu.widget.RowFilter('acInput1','acResult1', oDataTable,fnFilter);
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf('msie') != -1 && ua.indexOf('opera') < 0) {
        oAutoComp.useIFrame = true;    
}

</script>
</body></html>